<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>360开机动画.html</title>
  <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .box{
          width: 300px;
          position: fixed;
          bottom: 0;
          right: 0;
        }
        .cancel{
          font-size: 25px;
          z-index: 500;
          position: absolute;
          right: 10px;
          cursor: pointer;
        }
        .header img{
          width: 300px;
          height: 200px;
          display: block;
        }
        .footer img {
          width: 300px;
          height: 100px;
          display: block;
        }
    </style>
</head>
<body>
<div class="box">
  <div class="cancel"><span >x</span></div>

  <div class="header">
    <img src="images/1.jpg">
  </div>
  <div class="footer">
    <img src="images/2.jpg">
  </div>
</div>
</body>
<script>
  $(function (){
    $('.cancel').click(function (){
      $('.footer').animate({
        height: 0
      }, 1000, 'swing', function (){
        $('.cancel').animate({
          right: -300
        }, 1000)
        $('.box').animate({
          width: 0
        }, 1000)
      })
    })
  })
</script>
</html>